<html>

<head>
    <link rel="stylesheet" href="iconFont.css">
    <script src="vue.min.js"></script>
    <meta charset="utf-8">
</head>
<style type="text/css">
    body {
        position: relative;
        -webkit-font-smoothing: subpixel-antialiased;
        margin: 0px;
        padding: 0px;
        background: #2c2c2c;
        /* linear-gradient(rgb(45, 45, 45), rgb(25, 25, 25)); */
        color: rgb(189, 189, 189);
        /* font-size: 12px; */
    }

    button {
        /* color: rgb(235, 233, 233);
        background-color: rgb(78, 77, 77);
        border-radius: 0.3em;    
        border-image:none;  
        border-style: none; */
        min-width: 20px;
        /* height: 33px; */
        background-image: linear-gradient(#4281b6, #4281b6);
        border: 1px solid #171717;
        border-radius: 3px;
        color: #fff;
        /* font-size: 16px; */
        /* font-weight: 800; */
        text-align: center;
        outline: none;
        overflow: hidden;
        cursor: pointer;
    }
    :root {
        --top-and-bottom: calc(100vh - 54px);
        --top: calc(100vh - 32px);
    }

    
    #app {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 1em);
        overflow-x: hidden;
        padding: 1em;
        padding-right: 0;
        padding-bottom: 0;
    }

    hr{
        border-width: 0.5px;
        /* color: gray; */
        border-color: gray;
    }
    .pluginItem b{
        font-size: 1.5em;
        color:chocolate;
    }

    .items{
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow-y: auto;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
    }

    .btns{
        padding: 0.5em; 
        text-align: center;
        padding-right: 1em;       
        border-top: solid 1px gray;        
    }

    .btns button{
        font-size: 1.3em;
    }

    a {
        color: rgb(14, 127, 233);
        cursor: pointer;
    }

    a:hover{
        color: rgb(52, 146, 235);
    }

    a:active{
        color: rgb(104, 170, 233);
    }   

    .btns a{
        padding-right: 2em;
    }
    .error{
        color: red;
    }
    select{
        background-color: #2e2e2e;
        padding: 0 5px;
        /* border: 1px solid #171717;
        border-radius: 100px; */
        outline: none;
        /* font-size: 12px; */
        color: whitesmoke;
        margin-right: 0.5em;
        /* cursor: pointer;; */
    }

    .warn{
        color:#cc9138;
    }
</style>

<body>    
    <div id="app" >
        <div class="items">
            <plugin-item v-for="(p,i) in pkgsv" :pp="p" :i="i" ></plugin-item>
        </div>
        <div class="btns" >
            <a @click="openAd" title="还支持FairyGUI">推荐插件：实时节点树，DrawCall分析插件</a>
            <button @click="onekey" v-show="needOneKey">一键恢复</button>
            <button @click="saveKeys">保存</button>
        </div>
    </div>


    <script src="./app.js">

    </script>
</body>

</html>